<script setup lang="ts">
import {orderDetail} from "@/api/order";
import {OrderForm} from "@/api/order/types";
import defaultSettings from "@/settings";
import {phoneReplace} from "@/utils";

const props = defineProps({
  orderId: {
    type: String,
    default: "",
  },

  visible: {
    type: Boolean,
    default: false,
  },
});

const steps = reactive([
  {
    title: "提交下单",
    description: "",
  },
  {
    title: "付款成功",
    description: "",
  },
  {
    title: "商家接单",
    description: "",
  },
  {
    title: "待分拣",
    description: "",
  },
  {
    title: "配送商品",
    description: "",
  },
  {
    title: "完成",
    description: "",
  },
]);

const stepActive = ref(0);

const order = reactive<OrderForm>({});
const emit = defineEmits(["close"]);
const current_role = localStorage.getItem("role_name");

const drawer = ref(false)
const drawer2 = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      // done()
    })
    .catch(() => {
      // catch error
    })
}

function close() {
  drawer2.value = false;
  emit("close");
}

function confirmClick() {
  drawer2.value = false
}

watch(
  () => props.orderId,
  (newVal) => {
    if (newVal) {
      orderDetail(parseInt(newVal))
        .then(({data}) => {
          console.log(data)
          Object.assign(order, data);
          steps[0].description = order.create_time || "";

          if (current_role !== 'sys') {
            data.address.phone = phoneReplace(data.address.phone || 0);
          }

          if (order.current_status == 20) {
            steps[1].description = order.pay_time || "";
            stepActive.value = 5;
          } else if (order.current_status == 17) { //待配送
            steps[1].description = order.pay_time || "";
            steps[2].description = order.accept_time || ""; //接单时间
            steps[3].description = order.deliver_time || ""; //分拣时间
            stepActive.value = 4;
          } else if (order.current_status == 16) { //待分拣
            steps[1].description = order.pay_time || "";
            steps[2].description = order.accept_time || ""; //接单时间
            // steps[3].description = order.deliver_time || ""; //分拣时间
            stepActive.value = 3;
          } else if (order.status == 10) {
            steps[1].description = order.pay_time || "";
            stepActive.value = 2;
          } else if (order.current_status == 60) { //退款
            steps[2].description = order.refund_time || "";
            steps[2].title = "商家已退款";
            steps[1].description = order.pay_time || "";
            stepActive.value = 3;
          } else if (order.current_status == 80) { //退款
            steps[1].description = order.cancel_time || "";
            steps[2].title = "订单已关闭";
          }
        });
    }
  })

onMounted(() => {

});

const tagTypes = ref<any[]>([
  "primary", "success", "info", "warning", "danger"
])
</script>

<template>
  <el-drawer v-model="props.visible" @close="close" size="60%" style="min-width: 640px;">
    <template #header>
      <h4 style="margin: 0px;">订单详情</h4>
    </template>
    <template #default>
      <el-steps style="min-width: 600px;" :active="stepActive" finish-status="success" align-center>
        <el-step :title="step.title" :description="step.description" v-for="(step)  in steps"/>
      </el-steps>

      <el-card class="card-block card-half">
        <h4>交易信息</h4>
        <p class="pli">
          <el-text class="mx-1 margin10-r">订单编号：</el-text>
          {{ order.out_trade_no }}
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">菜单名称：</el-text>
          {{ order.shop_type == 1 ? order.menu_title : "普通" }}
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">下单时间：</el-text>
          {{ order.create_time }}
        </p>

        <p class="pli" v-if="order.status == 80 || order.status == 60">
          <el-text class="mx-1 margin10-r">取消原因：</el-text>
          {{ order.reason || "" }}
        </p>
      </el-card>

      <el-card class="card-block card-half">
        <h4>收货人信息</h4>
        <p class="pli">
          <el-text class="mx-1 margin10-r">收货人：</el-text>
          <template v-if="order.address">
            {{ order.address.consignee || "" }} {{ order.address.phone || "" }}
          </template>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">收货地址：</el-text>
          <el-text class="mx-1">
            <template v-if="order.address">
              {{ order.address.province_title || "" }}
              {{ order.address.city_title || "" }}
              {{ order.address.region_title || "" }}
              {{ order.address.district_title || "" }}
              {{ order.address.address }}
            </template>
          </el-text>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">送达时间：</el-text>
          {{ order.deliver_time || '' }}
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">订单备注：</el-text>
          {{ order.buyer_remark || '' }}
        </p>
      </el-card>

      <el-card class="card-block card-half">
        <h4>买家信息</h4>
        <p class="pli">
          <el-text class="mx-1 margin10-r">买家昵称：</el-text>
          <template v-if="order.address">
            {{ order.address.consignee || "" }}
          </template>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">手机号码：</el-text>
          <el-text class="mx-1">
            <template v-if="order.address">
              {{ order.address.phone || "" }}
            </template>
          </el-text>
        </p>
      </el-card>

      <el-card class="card-block card-half">
        <h4>商家信息</h4>
        <p class="pli">
          <el-text class="mx-1 margin10-r">店铺名称：</el-text>
          <template v-if="order.address">
            {{ order.shop.title || "" }}
          </template>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">所在园区：</el-text>
          <el-text class="mx-1">
            <template v-if="order.shop">{{ order.shop.park_title || "" }}</template>
          </el-text>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">联系号码：</el-text>
          <el-text class="mx-1">
            <template v-if="order.shop">{{ order.shop.contact_phone || "" }}</template>
          </el-text>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">详细信息：</el-text>
          <el-text class="mx-1">
            <template v-if="order.shop">{{ order.shop.address || "" }}</template>
          </el-text>
        </p>
      </el-card>
      <div class="clearfix"></div>

      <h4>商品明细</h4>
      <el-table :data="order.products" stripe>
        <el-table-column property="图片" label="图片" width="150">
          <template #default="scope">
            <el-image :src="defaultSettings.imgDomain + scope.row.thumb" style="width: 45px; height: 45px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称" width="200"/>
        <el-table-column prop="skus" label="规格" width="">
          <template #default="scope">
            <div>
              <template v-if="scope.row.skus">
                <el-tag :type="tagTypes[tidx%3] || 'info'" v-for="(tag,tidx) in scope.row.skus"
                        style="margin-bottom: 5px;">
                  <template v-if="tag.sequence > 0">{{ tag.sequence }} -</template>
                  {{ tag.spec_item_title }} {{ scope.row.type == 1 ? ('x' + tag.amount) : '' }}
                </el-tag>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="product_price" label="价格"/>
        <el-table-column prop="amount" label="数量"/>
        <el-table-column prop="amount" label="状态"/>
      </el-table>

    </template>

    <template #footer>
      <div class="footer">
        <p class="pli">
          <el-text class="mx-1 margin10-r">商品金额：</el-text>
          <el-text class="text-left">￥{{ order.total_product_price || 0 }}</el-text>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">配送费：</el-text>
          <el-text class="text-left">￥{{ order.express_price || 0 }}</el-text>
        </p>

        <p class="pli">
          <el-text class="mx-1 margin10-r">打包费：</el-text>
          <el-text class="text-left">￥{{ order.bag_price || 0 }}</el-text>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">优惠券减免：</el-text>
          <el-text class="text-left">￥{{ order.coupon_price || 0 }}</el-text>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">退款金额：</el-text>
          <el-text class="text-left">￥{{ order.refund_price || 0 }}</el-text>
        </p>
        <p class="pli">
          <el-text class="mx-1 margin10-r">实付款：</el-text>
          <el-text class="text-left f-20">￥{{ order.total_price || 0 }}</el-text>
        </p>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>

.el-dropdown-link {
  position: relative;
  top: 3px;
  font-weight: bolder;
}

.el-dropdown-link.is-link {
  border-color: transparent !important;
  border: 0px !important;
}


/deep/ .el-card__body {
  padding: 0 !important;
}

.card-block {
  box-shadow: none;
  border: 0px;
  padding: 0px;
  vertical-align: middle;
  min-height: 240px;
}

.card-block .pli {
  margin: 10px 0px !important;
  display: flex;
}

.el-drawer__footer .mx-1 {
  align-self: auto;
  justify-content: right;
  font-size: 12px;
}

.el-drawer__footer .pli {
  margin: 10px 0px !important;
  font-size: 12px;
}

.card-block .mx-1 {
  min-width: 100px;
  display: inline-flex;
  align-self: auto;
  line-height: 20px;
}

.footer {
  border-top: 1px solid #eee;
}

.footer .pli {
  display: block;
}

.footer .pli .mx-1 {
  width: 100px !important;
  text-align: right !important;
  display: inline-block !important;
}

.text-left {
  text-align: left !important;
  display: inline-block !important;
  width: 100px !important;
}

.card-block.card-half {
  width: 50%;
  float: left;
}

.el-steps {
  padding: 15px 0px;
}

/deep/ .el-step__title {
  position: absolute;
  top: -40px;
  left: auto;
  right: auto;
  margin: auto;
  display: block;
  width: 100%;
  font-size: 14px;
}


/deep/ .el-step__description {
  padding: 15px 0px 0px;
  font-size: 12px;
}

</style>
